<template>
  <div v-show="isVisible" class="context-menu" :style="{ left: position.x + 'px', top: position.y + 'px' }">
    <div class="menu-container">
      <template v-for="(item, index) in menuItems" :key="index">
        <div class="menu-item" @click="handleMenuClick(item)">
          <span class="menu-label">{{ item.label }}</span>
          <span v-if="item.submenu" class="submenu-arrow">›</span>
          <div v-if="item.submenu" class="submenu">
            <div v-for="(subItem, subIndex) in item.submenu" :key="subIndex" class="menu-item" @click="handleMenuClick(subItem)">
              {{ subItem.label }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import type { MenuItem } from "../cme-mapboxCore/config/rightMenu";

interface Props {
  menuItems: MenuItem[];
}

const props = defineProps<Props>();
console.log(props);

const isVisible = ref(false);
const position = ref({ x: 0, y: 0 });

// 在指定位置显示菜单
const showAt = (x: number, y: number) => {
  position.value = { x, y };
  isVisible.value = true;
};

// 隐藏菜单
const hide = () => {
  isVisible.value = false;
};

// 处理菜单项点击
const handleMenuClick = (item: MenuItem) => {
  if (item.action) {
    item.action();
  }
  hide();
};

// 点击外部关闭菜单
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (!target.closest(".context-menu")) {
    hide();
  }
};

// 暴露方法给父组件
defineExpose({
  showAt,
  hide
});

// 添加/移除点击外部监听器
onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
</script>

<style lang="scss" scoped>
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
  background: white;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 12%);
  opacity: 0;
  transform: scale(0.98);
  transform-origin: top left;
  animation: menuAppear 0.1s ease forwards;

  @keyframes menuAppear {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .menu-container {
    padding: 4px 0;
  }
  .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 13px;
    font-size: 13px;
    color: #333333;
    cursor: pointer;
    transition: all 0.2s ease;
    &:hover {
      color: #1890ff;
      background-color: #f0f7ff;
      > .submenu {
        display: block;
        animation: submenuAppear 0.2s ease forwards;
      }
    }
  }
  .menu-label {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .submenu {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    min-width: 130px;
    background: white;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 12%);
    opacity: 0;
    transform: translateX(-5px);

    @keyframes submenuAppear {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    .menu-item {
      padding: 6px 12px;
      &:first-child {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
      }
      &:last-child {
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
      }
    }
  }
  .submenu-arrow {
    margin-left: 6px;
    font-size: 14px;
    opacity: 0.6;
  }
}
</style>
